<!DOCTYPE html>
<html>
<head>
  <title>👥 客户详情</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #4361ee;
      --secondary-color: #3f37c9;
      --success-color: #4cc9f0;
      --info-color: #4895ef;
      --warning-color: #f72585;
      --danger-color: #e63946;
      --light-color: #f8f9fa;
      --dark-color: #212529;
      --row-even-bg: #f8f9fa;
      --row-odd-bg: #ffffff;
    }
    
    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      min-height: 100vh;
      max-width: 1440px;
      margin: 0 auto;
    }
    
    .header-gradient {
      background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
      color: white;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .card {
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      border: none;
      margin-bottom: 20px;
    }
    
    .table-container {
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    
    .table th {
      background-color: var(--primary-color);
      color: white;
    }
    
    /* 交替行颜色 */
    .table-striped tbody tr:nth-of-type(even) {
      background-color: var(--row-even-bg);
    }
    
    .table-striped tbody tr:nth-of-type(odd) {
      background-color: var(--row-odd-bg);
    }
    
    .badge-pending {
      background-color: #FF9800 !important;
    }
    
    .badge-processing {
      background-color: #2196F3 !important;
    }
    
    .badge-completed {
      background-color: #4CAF50 !important;
    }
    
    .badge-cancelled {
      background-color: #F44336 !important;
    }
    
    .badge-refunded {
      background-color: #9E9E9E !important;
    }
    
    .badge-on-hold {
      background-color: #9C27B0 !important;
    }
    
    .badge-failed {
      background-color: #607D8B !important;
    }
    
    /* 美化电话号码显示 */
    .phone-display {
      display: inline-flex;
      align-items: center;
      padding: 8px 16px;
      border-radius: 30px;
      background: linear-gradient(135deg, #e3f2fd, #bbdefb);
      color: #0d47a1;
      font-weight: 600;
      font-size: 1.1em;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
    }
    
    .phone-display:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      background: linear-gradient(135deg, #bbdefb, #90caf9);
    }
    
    .phone-icon-large {
      font-size: 1.3em;
      margin-right: 10px;
    }
  </style>
</head>
<body class="p-4">
  <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4 header-gradient p-4">
      <h1 class="mb-0">👥 客户详情</h1>
      <div class="d-flex align-items-center">
        <nav class="navbar navbar-expand navbar-dark me-3">
          <div class="navbar-nav">
            <a class="nav-link" href="/"><i class="fas fa-home me-1"></i> 系统首页</a>
            <a class="nav-link" href="/orders"><i class="fas fa-list me-1"></i> 订单管理</a>
            <a class="nav-link" href="/customers"><i class="fas fa-users me-1"></i> 客户管理</a>
          </div>
        </nav>
        <a href="/customers" class="btn btn-light btn-sm">
          <i class="fas fa-arrow-left"></i> 返回客户列表
        </a>
      </div>
    </div>
    
    <!-- 客户基本信息 -->
    <div class="row">
      <div class="col-md-6">
        <div class="card mb-4">
          <div class="card-header bg-primary text-white">
            <h5 class="mb-0">👤 客户基本信息</h5>
          </div>
          <div class="card-body">
            <table class="table table-borderless">
              <tr>
                <td><strong>姓名:</strong></td>
                <td>
                  {% if customer.first_name or customer.last_name %}
                    {{ customer.first_name }} {{ customer.last_name }}
                  {% else %}
                    {{ customer.full_name }}
                  {% endif %}
                </td>
              </tr>
              {% if customer.email %}
              <tr>
                <td><strong>邮箱:</strong></td>
                <td>{{ customer.email }}</td>
              </tr>
              {% endif %}
              {% if customer.phone %}
              <tr>
                <td><strong>电话:</strong></td>
                <td>
                  <div class="phone-display">
                    <span class="phone-icon-large">📞</span>
                    <span>{{ customer.phone | format_phone(customer.country) }}</span>
                  </div>
                </td>
              </tr>
              {% endif %}
            </table>
          </div>
        </div>
      </div>
      
      <div class="col-md-6">
        <div class="card mb-4">
          <div class="card-header bg-primary text-white">
            <h5 class="mb-0">📊 客户统计</h5>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-6 text-center">
                <h3 class="text-primary">{{ total_orders }}</h3>
                <p class="text-muted">订单总数</p>
              </div>
              <div class="col-6 text-center">
                <h3 class="text-success">{{ "%.2f"|format(total_spent) }} {{ common_currency }}</h3>
                <p class="text-muted">总消费</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 地址信息 -->
    <div class="card mb-4">
      <div class="card-header bg-primary text-white">
        <h5 class="mb-0">📍 地址信息</h5>
      </div>
      <div class="card-body">
        <table class="table table-borderless">
          {% if customer.address %}
          <tr>
            <td><strong>地址:</strong></td>
            <td>{{ customer.address }}</td>
          </tr>
          {% endif %}
          {% if customer.address_2 %}
          <tr>
            <td><strong>地址2:</strong></td>
            <td>{{ customer.address_2 }}</td>
          </tr>
          {% endif %}
          {% if customer.city or customer.state or customer.postcode %}
          <tr>
            <td><strong>城市/州/邮编:</strong></td>
            <td>
              {{ customer.city or '' }}{% if customer.state %}, {{ customer.state }}{% endif %}{% if customer.postcode %}, {{ customer.postcode }}{% endif %}
            </td>
          </tr>
          {% endif %}
          {% if customer.country %}
          <tr>
            <td><strong>国家:</strong></td>
            <td>{{ customer.country | country_name }}</td>
          </tr>
          {% endif %}
        </table>
      </div>
    </div>
    
    <!-- 历史订单 -->
    <div class="card mb-4">
      <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0">📦 历史订单</h5>
        <span class="badge bg-light text-dark">{{ orders|length }} 个订单</span>
      </div>
      <div class="table-container">
        <table class="table table-striped table-hover mb-0">
          <thead>
            <tr>
              <th>订单ID</th>
              <th>来源站点</th>
              <th>金额</th>
              <th>订单日期</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            {% for order in orders %}
            <tr>
              <td>
                <a href="/order/{{ order.id }}" style="color: #007bff; text-decoration: underline;">{{ order.order_id }}</a>
              </td>
              <td>
                <div class="d-flex justify-content-between">
                  <span>{{ order.source }}</span>
                  <small class="text-muted">{{ order.domain }}</small>
                </div>
              </td>
              <td>{{ "%.2f"|format(order.total) }} {{ order.currency }}</td>
              <td>{{ order.order_date.strftime('%Y-%m-%d %H:%M') if order.order_date else '-' }}</td>
              <td class="text-end">
                {% if order.status == 'processing' %}
                  <span class="badge badge-pending">待处理</span>
                {% elif order.status == 'completed' %}
                  <span class="badge badge-completed">已完成</span>
                {% elif order.status == 'cancelled' %}
                  <span class="badge badge-cancelled">已取消</span>
                {% elif order.status == 'refunded' %}
                  <span class="badge badge-refunded">已退款</span>
                {% elif order.status == 'on-hold' %}
                  <span class="badge badge-on-hold">发货中</span>
                {% elif order.status == 'failed' %}
                  <span class="badge badge-failed">被拒收</span>
                {% else %}
                  <span class="badge bg-secondary">{{ order.status }}</span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</body>
</html>